import { 
  Box, 
  Flex, 
  Input, 
  IconButton, 
  useColorModeValue 
} from '@chakra-ui/react';
import { useState, FormEvent, ChangeEvent, KeyboardEvent } from 'react';
import { FiSend } from 'react-icons/fi';

interface MessageInputProps {
  onSendMessage: (message: string) => void;
  disabled?: boolean;
  placeholder?: string;
}

const MessageInput = ({ 
  onSendMessage, 
  disabled = false, 
  placeholder = '输入您的信息...' 
}: MessageInputProps) => {
  const [message, setMessage] = useState('');
  const bgColor = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (message.trim() && !disabled) {
      onSendMessage(message);
      setMessage('');
    }
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit(e);
    }
  };

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setMessage(e.target.value);
  };

  return (
    <Box 
      as="form" 
      onSubmit={handleSubmit}
      p={3}
      borderTop="1px solid"
      borderColor={borderColor}
      bg={bgColor}
    >
      <Flex>
        <Input
          value={message}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          disabled={disabled}
          mr={2}
          autoFocus
        />
        <IconButton
          aria-label="发送消息"
          icon={<FiSend />}
          type="submit"
          colorScheme="blue"
          isDisabled={!message.trim() || disabled}
        />
      </Flex>
    </Box>
  );
};

export default MessageInput; 